<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基本样式 | 基础</title>
	<link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
	<link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>基本样式</dd>
			<dt>描述：</dt>
			<dd>常见 HTML 标签在统一浏览器缺省样式后的表现</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
			</dd>
		</dl>
	</div>

    <header>我是 &lt;header&gt;</header>

    <h1>我是标题 &lt;h1&gt;</h1>
    <h2>我是标题 &lt;h2&gt;</h2>
    <h3>我是标题 &lt;h3&gt;</h3>
    <h4>我是标题 &lt;h4&gt;</h4>
    <h5>我是标题 &lt;h5&gt;</h5>
    <h6>我是标题 &lt;h6&gt;</h6>

    <div>我是 &lt;div&gt;</div>

    <p>&lt;p&gt; 段落中的
        <strong>&lt;strong&gt;</strong>
        <b>&lt;b&gt;</b>
        <i>&lt;i&gt;</i>
        <a href="javascript:;">&lt;a&gt;</a>
        <em>&lt;em&gt;</em>
        <small>&lt;small&gt;</small>
        <mark>&lt;mark&gt;</mark>
        <span>&lt;span&gt;</span>
        <sub>&lt;sub&gt;</sub>
        <sup>&lt;sup&gt;</sup>
        <code>&lt;code&gt;</code>
        <kbd>&lt;kbd&gt;</kbd>
        <abbr title="&lt;abbr&gt;">&lt;abbr&gt;</abbr>
    </p>

    <blockquote>我是 &lt;blockquote&gt;</blockquote>

    <dl>
        <dt>&lt;dl&gt; 标题 &lt;dt&gt;</dt>
        <dd>&lt;dl&gt; 内容 &lt;dd&gt;</dd>
        <dd>&lt;dl&gt; 内容 &lt;dd&gt;</dd>
    </dl>

    <ul>
        <li>&lt;ul&gt; 第1项 &lt;li&gt;</li>
        <li>&lt;ul&gt; 第2项 &lt;li&gt;</li>
        <li>&lt;ul&gt; 第3项 &lt;li&gt;</li>
    </ul>

    <ol>
        <li>&lt;ol&gt; 第1项 &lt;li&gt;</li>
        <li>&lt;ol&gt; 第2项 &lt;li&gt;</li>
        <li>&lt;ol&gt; 第3项 &lt;li&gt;</li>
    </ol>

    <article>我是 &lt;article&gt;</article>

    <aside>我是 &lt;aside&gt;</aside>

    <figure>
        <img src="../demo-lib/demo_img.png" alt="">
        <figcaption>我是 &lt;figcaption&gt;</figcaption>
    </figure>

	<div>

		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" style="width:150px">
			<path d="M36.985 0H7.963C7.155 0 6.5.655 6.5 1.926V55c0 .345.655 1 1.463 1h40.074c.808 0 1.463-.655 1.463-1V12.978c0-.696-.093-.92-.257-1.085L37.607.257A.884.884 0 0 0 36.985 0z" fill="#e9e9e0"/><path fill="#d9d7ca" d="M37.5.151V12h11.849z"/><path d="M48.037 56H7.963A1.463 1.463 0 0 1 6.5 54.537V39h43v15.537c0 .808-.655 1.463-1.463 1.463z" fill="#e57e25"/><g fill="#fff"><path d="M21.459 50.238c0 .364-.075.718-.226 1.06s-.362.643-.636.902-.61.467-1.012.622-.856.232-1.367.232c-.219 0-.444-.012-.677-.034s-.467-.062-.704-.116-.463-.13-.677-.226-.398-.212-.554-.349l.287-1.176c.128.073.289.144.485.212s.398.132.608.191.419.107.629.144.405.055.588.055c.556 0 .982-.13 1.278-.39.296-.26.444-.645.444-1.155 0-.31-.104-.574-.314-.793s-.472-.417-.786-.595-.654-.355-1.019-.533-.706-.388-1.025-.629-.583-.526-.793-.854-.314-.738-.314-1.23c0-.446.082-.843.246-1.189s.385-.641.663-.882.602-.426.971-.554.759-.191 1.169-.191c.419 0 .843.039 1.271.116s.774.203 1.039.376c-.055.118-.118.248-.191.39l-.205.396c-.063.123-.118.226-.164.308s-.073.128-.082.137c-.055-.027-.116-.063-.185-.109s-.166-.091-.294-.137-.296-.077-.506-.096-.479-.014-.807.014c-.183.019-.355.07-.52.157s-.31.193-.438.321-.228.271-.301.431-.109.313-.109.458c0 .364.104.658.314.882s.47.419.779.588.647.333 1.012.492.704.354 1.019.581.576.513.786.854.318.781.318 1.319zM25.861 53.055L22.73 42.924h1.873l2.338 8.695 2.475-8.695h1.859l-3.281 10.131h-2.133zM40.668 47.805v3.896c-.21.265-.444.48-.704.649s-.533.308-.82.417-.583.187-.889.233-.608.068-.909.068c-.602 0-1.155-.109-1.661-.328s-.948-.542-1.326-.971-.675-.966-.889-1.613-.321-1.395-.321-2.242.107-1.593.321-2.235.511-1.178.889-1.606.822-.754 1.333-.978 1.062-.335 1.654-.335c.547 0 1.058.091 1.531.273s.897.456 1.271.82l-1.135 1.012c-.219-.265-.47-.456-.752-.574s-.574-.178-.875-.178c-.337 0-.658.063-.964.191s-.579.344-.82.649-.431.699-.567 1.183-.21 1.075-.219 1.777c.009.684.08 1.276.212 1.777s.314.911.547 1.23.497.556.793.711.608.232.937.232c.101 0 .234-.007.403-.021s.337-.036.506-.068.33-.075.485-.13.269-.132.342-.232v-2.488h-1.709v-1.121h3.336z"/></g><path d="M45.5 22v-6h-6v2h-6v-4h-10v4h-6v-2h-6v6h6v-2h3.548c-4.566 2.636-7.548 7.588-7.548 13a1 1 0 1 0 2 0c0-5.246 3.229-9.999 8-11.995V24h10v-2.995c4.771 1.997 8 6.75 8 11.995a1 1 0 1 0 2 0c0-5.412-2.982-10.364-7.548-13H39.5v2h6zm-30-2h-2v-2h2v2zm16 2h-6v-6h6v6zm10-4h2v2h-2v-2z" fill="#c8bdb8"/>
		</svg>

	</div>
	<div>

   		<audio src="../demo-lib/demo_audio.mp3" controls></audio>

	</div>
	<div>

    	<video src="../demo-lib/demo_video.mp4" controls style="max-width:300px"></video>

	</div>
	<div>

    <canvas style="width:300px; height:150px" id="canvas"></canvas>

    <nav>我是 &lt;nav&gt;</nav>

    <section>我是 &lt;section&gt;</section>

    <pre>
        &lt;pre&gt; 代码片段
    </pre>

    <table>
        <colgroup span="2" style="width:300px"></colgroup>
        <caption>表格标题 &lt;caption&gt;</caption>
        <thead>
            <tr>
                <th>&lt;table&gt; 单元格 &lt;th&gt;</th>
                <th>&lt;table&gt; 单元格 &lt;th&gt;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>&lt;table&gt; 单元格 &lt;td&gt;</td>
                <td>&lt;table&gt; 单元格 &lt;td&gt;</td>
            </tr>
        </tbody>
	</table>

	<hr>

    <form>
        &lt;form&gt;
        <input type="text" placeholder="text">
        <input type="text" placeholder="text" readonly>
        <input type="text" placeholder="text" disabled>
        <input type="password" placeholder="password">
        <input type="number" placeholder="number">
        <input type="search" placeholder="search">
        <input type="radio" name="test_radio" id="test_radio1">
        <label for="test_radio1">&lt;label&gt; 1</label>
        <input type="radio" name="test_radio" id="test_radio2">
        <label for="test_radio2">&lt;label&gt; 2</label>
        <input type="radio" name="test_radio" id="test_radio2" disabled>
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="checkbox" disabled>
        <select>
            <optgroup label="&lt;select&gt;">
                <option>&lt;option&gt; 1</option>
                <option disabled>&lt;option&gt; 2</option>
            </optgroup>
            <optgroup label="&lt;select&gt;">
                <option>&lt;option&gt; 3</option>
            </optgroup>
        </select>
        <select size="2" multiple>
            <option>select multiple &lt;option&gt; 1</option>
            <option>select multiple &lt;option&gt; 2</option>
            <option>select multiple &lt;option&gt; 3</option>
        </select>
        <select disabled>
            <option>&lt;option&gt;</option>
        </select>
        <textarea>&lt;textarea&gt;</textarea>
        <textarea disabled>&lt;textarea&gt;</textarea>
        <button>&lt;button&gt;</button>
        <input type="button" value="&lt;input button&gt;">
        <input type="reset" value="&lt;input reset&gt;">
        <input type="submit" value="&lt;input submit&gt;">

    </form>

    <footer>我是 &lt;footer&gt;</footer>
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d');
        ctx.strokeStyle = '#ef3d61';
        ctx.lineWidth = 6;
        /**
         * x	圆的中心的 x 坐标。
         * y	圆的中心的 y 坐标。
         * r	圆的半径。
         * sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
         * eAngle	结束角，以弧度计。
         * counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
         */
        ctx.arc(150, 75, 60, 0, 10, false);
        ctx.stroke();
        ctx.font = '30px Consolas';
        ctx.fillStyle = '#ef3d61';
        ctx.textAlign = 'center';
        ctx.fillText('Canvas', 150, 75 + 20 / 2);
    </script>
</body>
</html>
